<template>
<!-- 排行榜里的每一个榜单点击进去的具体歌单 -->
  <div class="list">
    <div class="back" @click="$router.back(-1)"></div>
    <div class="top" >
        <img :src="playlist.coverImgUrl | imageView(246)" alt="">
        <span>{{playlist.updateTime | unixToDate}}</span>
    </div>
    <ul class="body"  @click="$emit('update:gedan', playlist.tracks)">
        <HomeMusicItemSongBody 
          v-for="(item,index) in playlist.tracks" 
          :key="item.id" 
          :item="item" 
          :order="index+1"
          @click.native="$emit('update:currentPlaySong',item)"
          :currentPlaySongId="currentPlaySongId"
          :playing="playing"
        />
    </ul>
  </div>
</template>

<script>
import HomeMusicItemSongBody from './HomeMusicItemSongBody.vue'
export default {
  name:'listItemList',
  components: {
      HomeMusicItemSongBody
  },
  props:['currentPlaySongId','playing'],
  data: function () {
    return {
      playlist: [],
    };
  },
  created: function () {
    // this.getTracksById(this.$route.query.id);
    this.axios
          .get("https://apis.netstart.cn/music/playlist/detail?id=" + this.$route.query.id)
          .then(res => {
              this.playlist = res.data.playlist;
          });
  },
 /*  methods: {
    getTracksById: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail?id=" + id)
        .then((res) => {
          this.playlist = res.data.playlist;
        });
    },
  }, */
};
</script>

<style lang="less" scoped>
.back{
      height: 20px;
      width: 20px;
      // background-color: pink;
      background: url('../assets/images/back.png') center no-repeat;
      background-size: contain;
      color: white;
      position: absolute;
      z-index: 100;
      top: 10px;
      left: 10px;
  }
.top{
    height: 200px;
    text-align: center;
    overflow: hidden;
    position: relative;
    img{
        // height: 100%;
        width: 100%;
        transform: translateY(-76px);
    }
    span{
        position: absolute;
        top: 85%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 13px;
        color: white;
    }
}
</style>